<?php
$str = file_get_contents("./1.txt");
// $arr = json_decode($str,true);
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/booksList1.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
	</head>
	<body>
        <div class="data" style="position:absolute;opacity:0;">
            <?
            echo $str ; 
            ?>
        </div>
		<div class="content">
			<ul class="box-con"> 
				<!-- <li>
					<a href="#">
						<img src="../images/181005_106.jpg" alt="" />	
						<p class="book-name">书名</p>
						<p class="price">￥20</span></p>
					
					</a>
					<button>立即购买</button>
				</li>
				<li>
					<a href="#">
						<img src="../images/181005_106.jpg" alt="" />	
						<p class="book-name">书名</p>
						<p class="price">￥20</span></p>
					
					</a>
					<button>立即购买</button>
				</li>
				<li>
					<a href="#">
						<img src="../images/181005_106.jpg" alt="" />	
						<p class="book-name">书名</p>
						<p class="price">￥20</span></p>
					
					</a>
					<button>立即购买</button>
				</li>
				<li>
					<a href="#">
						<img src="../images/181005_106.jpg" alt="" />	
						<p class="book-name">书名</p>
						<p class="price">￥20</span></p>
					
					</a>
					<button>立即购买</button>
				</li>
				<li>
					<a href="#">
						<img src="../images/181005_106.jpg" alt="" />	
						<p class="book-name">书名</p>
						<p class="price">￥20</span></p>
					
					</a>
					<button>立即购买</button>
				</li> -->
			</ul>
			<!-- <div class="pages">
				<button class="btn after">上一页</button>
					<span class="active">1</span>	
				<button class="btn befor">下一页</button>
			</div> -->
		</div>
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<!-- <script type="text/javascript" src="../js/booksList.js"></script> -->
	<script>
        let dataEle = document.querySelector(".data");
        let str = dataEle.innerHTML;
		let str2 = "["+str.trim().substr(1)+"]"; 
		let data = JSON.parse(str2);
		let ulEle = document.querySelector(".box-con");
		renderDow(ulEle,data);
		function renderDow (ulEle,data){
			data.forEach(function( item , key ){
				let liEle = document.createElement("li");
				liEle.innerHTML = `<a href="./bookdetai.php?author=${item.author}&bookName=${item.bookName}&publish=${item.publish}&ptime=${item.ptime}&part=${item.part}&price=${item.price}&srcImg=${item.srcImg}">
							<img src="../images/${item.srcImg}" style="width:150px;height:150px" alt="" />	
							<p class="book-name">${item.bookName}</p>
							<p class="price">￥${item.price}</span></p>
						</a>
						<button>立即购买</button>` ;
				console.log(liEle);
				ulEle.appendChild(liEle);
			});
		}
	</script>
</html>